<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui" template="/template/template_layout_lr.xhtml"
	xmlns:s="http://sduept.security.el/func">
	<ui:define name="head">
		<link rel="stylesheet" href="/resources/plugins/datatables/dataTables.bootstrap.css" />
		<style>
.chart svg {
width: 150% !important;
}
</style>
	</ui:define>
	<ui:define name="left-box-title">
	        保护设备信息
	</ui:define>
	<ui:define name="left-box-body">
		<p:confirmDialog global="true" showEffect="fade" hideEffect="fade">
			<p:commandButton value="是" type="button" styleClass="ui-confirmdialog-yes" icon="ui-icon-check" />
			<p:commandButton value="否" type="button" styleClass="ui-confirmdialog-no" icon="ui-icon-close" />
		</p:confirmDialog>
		<div class="box-header with-border" id="searchInput">
			<h:form id="form1">
				<p:growl id="msg" showDetail="true" />
				<p:autoComplete placeholder="输入拼音首字母可查询" id="in_station"
					value="#{protectionEquipmentWaveController.filterStation}"
					completeMethod="#{cimUtilController.completeCimStation500}" scrollHeight="400" style="float:left;">
					<p:ajax update="in_station form2:tree" event="itemSelect"
						listener="#{protectionEquipmentWaveController.autoCompleteStation}" />
				</p:autoComplete>
				<p:commandButton icon="fa fa-refresh" style="margin-left: 3px;" update="form2:tree" title="刷新"
					actionListener="#{protectionEquipmentWaveController.initTree()}"></p:commandButton>
				<p:commandButton icon="fa fa-tasks" title="一键生成"
					rendered="#{s:hasPermission(session,'xtsz_dwmx_bxsjmx_bhsbpz_yjsc')}"
					actionListener="#{protectionEquipmentWaveController.generteAll}" update="msg">
					<p:confirm header="提示" message="一键生成耗时比较长，确定要重新生成?" icon="ui-icon-alert" />
				</p:commandButton>
			</h:form>
		</div>
		<div class="box-body  with-border">
			<h:form id="form2">
				<p:tree value="#{protectionEquipmentWaveController.root}" style="width:400px;border:none"
					selectionMode="single" var="node" dynamic="true" id="tree" widgetVar="tree" animate="true">
					<p:ajax event="expand" update="tree"
						listener="#{protectionEquipmentWaveController.onNodeExpand}" />
					<p:ajax event="select" process="@this :form3:svg"
						update=":form3:svg  autoBtn  relationBtn
										          :anologForm:anologTb :digitForm:digitTb :exceptionForm  fileUploadForm "
						listener="#{protectionEquipmentWaveController.onNodeSelect}" oncomplete="showSvg()" />
					<p:treeNode type="station" icon="fa fa-home">
						<h:outputText value="#{node}" />
					</p:treeNode>
					<p:treeNode type="wave" icon="fa fa-cc-diners-club">
						<h:outputText value="#{node}" />
					</p:treeNode>
				</p:tree>
			</h:form>
		</div>
	</ui:define>
	<ui:define name="right-box-title">
	       详细信息
	</ui:define>
	<ui:define name="right-box-body">
		<div class="nav-tabs-custom" style="display: none;" id="tabView">
			<ul class="nav nav-tabs">
				<li class="active"><a href="#anologChannel" data-toggle="tab">通道信息</a></li>
				<li><a href="#exceptionmsg" data-toggle="tab">异常信息</a></li>
				<li><a href="#fileUpload" data-toggle="tab">文件上传</a></li>
			</ul>
			<div class="tab-content no-padding">
				<div class="chart tab-pane active" id="anologChannel">
					<p:toolbar>
						<f:facet name="left">
							<p:commandButton id="autoBtn" value="生成通道"
								rendered="#{s:hasPermission(session,'xtsz_dwmx_bxsjmx_bhsbpz_sctd')}"
								actionListener="#{protectionEquipmentWaveController.autoGenarate()}"
								update=":anologForm:anologTb :digitForm:digitTb :exceptionForm :form1:msg">
								<p:confirm header="提示" message="生成通道会删除现有的设备关联，确定要生成通道么？" icon="ui-icon-alert" />
							</p:commandButton>
							<p:commandButton id="relationBtn" value="关联一次设备"
								rendered="#{s:hasPermission(session,'xtsz_dwmx_bxsjmx_bhsbpz_glycsb')}"
								actionListener="#{protectionEquipmentWaveController.relationEquipment()}"
								update=":anologForm:anologTb :digitForm:digitTb :exceptionForm :form1:msg">
								<p:confirm header="提示" message="关联一次设备会删除现有的设备关联，确定要关联么？" icon="ui-icon-alert" />
							</p:commandButton>
							<p:commandButton id="createDmf" value="生成dmf"
								rendered="#{s:hasPermission(session,'xtsz_dwmx_bxsjmx_bhsbpz_scdmf')}"
								actionListener="#{protectionEquipmentWaveController.createDmf()}"
								update=":anologForm:anologTb :digitForm:digitTb :exceptionForm :form1:msg" />
							<p:commandButton id="seeDmf" value="查看dmf" oncomplete="PF('dmfInfoDialog').show()"
								icon="fa fa-search " update="dialogForm:dmfInfoDialog" />
							<p:commandButton id="createCfg" value="生成cfg"
								rendered="#{s:hasPermission(session,'xtsz_dwmx_bxsjmx_bhsbpz_sccfg')}"
								actionListener="#{protectionEquipmentWaveController.createCfg()}" update=":form1:msg" />
						</f:facet>
					</p:toolbar>
					<ui:include src="anologChannelDetails.xhtml"></ui:include>
				</div>
				<div class="chart tab-pane" id="exceptionmsg">
					<div class="box">
						<div class="box-body full-content-scroll">
							<h:form id="exceptionForm">
								<p:inputTextarea id="exceptionTb" rows="#{protectionEquipmentWaveController.rowsCounts}"
									style="width:100%" readonly="true" value="#{protectionEquipmentWaveController.dmfMsg}">
								</p:inputTextarea>
							</h:form>
						</div>
						<div class="box-footer"></div>
					</div>
				</div>
				<h:form id="dialogForm">
					<p:dialog id="dmfInfoDialog" header="查看dmf" widgetVar="dmfInfoDialog" height="600px"
						width="1100px" modal="true">
						<p:panel style="white-space:pre-wrap;">
							#{protectionEquipmentWaveController.seeDmf()}
				</p:panel>
					</p:dialog>
				</h:form>
				<div class="chart tab-pane" id="fileUpload">
					<div class="box">
						<div class="box-body full-content-scroll">
							<h:form id="fileUploadForm">
								<p:growl id="msgs" showDetail="true" />
								<p:toolbar
									rendered="#{s:hasPermission(session,'xtsz_dwmx_bxsjmx_bhsbpz_wjsc_sc')}">
									<f:facet name="left">
										<p:commandButton value="上传" icon="fa fa-upload"
											actionListener="#{protectionEquipmentWaveController.resetUploadedFileMap()}"
											rendered="#{s:hasPermission(session,'xtsz_dwmx_bxsjmx_bhsbpz_wjsc_sc')}"
											onclick="PF('uploadWaveFileDialog').show()" />
									</f:facet>
								</p:toolbar>
								<p:dataTable id="waveFiles" emptyMessage="无记录" var="waveFile"
									value="#{protectionEquipmentWaveController.waveFiles}" paginator="true"
									paginatorPosition="bottom"
									paginatorTemplate="{Customization} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
									rows="30" rowsPerPageTemplate="30,50,100" rowKey="#{waveFile.id}" selectionMode="single"
									style="margin-bottom:20px;text-align:center">
									<f:facet name="{Customization}">
										<p:outputLabel value="总计：#{protectionEquipmentWaveController.waveFiles.size()} 条记录"
											style="margin-right:20px;"></p:outputLabel>
									</f:facet>
									<p:column headerText="文件名称" width="250">
										<h:outputText value="#{protectionEquipmentWaveController.getFileName(waveFile.path)}" />
									</p:column>
									<p:column headerText="第一采样点时间" width="200">
										<h:outputText value="#{waveFile.startSecond}" />
									</p:column>
									<p:column headerText="触发时间" width="200">
										<h:outputText value="#{waveFile.triggerSecond}" />
									</p:column>
									<p:column headerText="状态" width="200">
										<h:outputText value="#{waveFile.status}" />
									</p:column>
									<p:column headerText="操作" width="200">
										<p:commandButton title="删除" icon="fa fa-trash"
											rendered="#{s:hasPermission(session,'xtsz_dwmx_bxsjmx_bhsbpz_wjscd_sc')}"
											actionListener="#{protectionEquipmentWaveController.deleteWaveFile(waveFile.id)}"
											update="waveFiles fileUploadForm:msgs">
											<p:confirm header="提示" message="确定删除该记录吗?" icon="ui-icon-alert" />
										</p:commandButton>
										<p:commandButton title="重新解析" icon="fa fa-refresh"
											rendered="#{s:hasPermission(session,'xtsz_dwmx_bxsjmx_bhsbpz_wjscd_sc')}"
											actionListener="#{protectionEquipmentWaveController.reSetFileStatus(waveFile.id)}"
											update="waveFiles fileUploadForm:msgs">
											<p:confirm header="提示" message="确定重新解析么?" icon="ui-icon-alert" />
										</p:commandButton>
										<p:commandButton title="下载" icon="fa fa-download" ajax="false" 
										rendered="#{s:hasPermission(session,'jcsj_sjwh_ecsbwh_bhsbpz_wjsc_xz')}"
											actionListener="#{protectionEquipmentWaveController.prepareDownload(waveFile)}"
											update="fileUploadForm:msgs">
											<p:fileDownload value="#{protectionEquipmentWaveController.file}"></p:fileDownload>
											</p:commandButton>
									</p:column>
								</p:dataTable>
								<p:dialog widgetVar="uploadWaveFileDialog" id="uploadWaveFileDialog" header="录波文件上传"
									modal="true" width="550" height="200">
									<p:fileUpload multiple="true"
										update="msgs waveFiles :anologForm:anologTb :digitForm:digitTb :exceptionForm @this"
										id="uploadCom" invalidFileMessage="文件扩展名必须是dat或者cfg"
										allowTypes="/(\.|\/)(cfg|dat|CFG|DAT)$/" label="选择" uploadLabel="上传" cancelLabel="取消"
										fileUploadListener="#{protectionEquipmentWaveController.handleWaveFileUpload}"
										fileLimit="2" fileLimitMessage="文件个数必须是2个" mode="advanced" />
								</p:dialog>
							</h:form>
						</div>
						<div class="box-footer"></div>
					</div>
				</div>
			</div>
		</div>
		<div class="nav-tabs-custom" style="display: none;" id="svgView">
			<ul class="nav nav-tabs">
				<li class="active"><a href="#svgInfo" data-toggle="tab">站内接线图</a></li>
			</ul>
			<div class="tab-content no-padding">
				<div class="chart tab-pane active " id="svgInfo">
					<div class="box">
						<div class="box-body full-content-scroll with-border">
							<h:form id="form3">
								<p:outputPanel id="svg">
									<div id="maindiv" class="row full-content"></div>
									<h:inputHidden id="svgtext" value="#{protectionEquipmentWaveController.svgContent}"></h:inputHidden>
								</p:outputPanel>
							</h:form>
						</div>
						<div class="box-footer"></div>
					</div>
				</div>
			</div>
		</div>
		<div class="nav-tabs-custom" id="statistics">
			<div class="box box-primary box-solid with-border">
				<div class="box-header">
					<h3 class="box-title">按电压等级统计</h3>
					<div class="box-tools pull-right">
						<button class="btn btn-default btn-sm" data-widget="collapse">
							<i class="fa fa-minus"></i>
						</button>
					</div>
				</div>
				<div class="box-body" id="vol">
					<div class=" col-md-2">
						<div class="description-block border-right">
							<p class="description-header">500kV</p>
							<p class="text-green"></p>
						</div>
					</div>
					<div class="col-md-2">
						<div class="description-block border-right">
							<p class="description-header">220kV</p>
							<p class="text-yellow"></p>
						</div>
					</div>
					<div class=" col-md-2">
						<div class="description-block border-right">
							<p class="description-header">110kV</p>
							<p class="text-blue"></p>
						</div>
					</div>
					<div class=" col-md-2">
						<div class="description-block border-right">
							<p class="description-header">35kV</p>
							<p class="text-orange"></p>
						</div>
					</div>
					<div class=" col-md-2">
						<div class="description-block border-right">
							<p class="description-header">总计</p>
							<p class="text-red"></p>
						</div>
					</div>
				</div>
			</div>
			<div class="box box-primary box-solid with-border">
				<div class="nav-tabs-custom">
					<ul class="nav nav-tabs pull-right ui-sortable-handle" style="background-color: white">
						<li class="pull-left header" style="color: black; font-size: 16px;">按生产厂家统计</li>
						<li class="active"><a href="#tbPane" data-toggle="tab" aria-expanded="false">表格</a></li>
						<li id="chartTab"><a href="#chartPane" data-toggle="tab" aria-expanded="false">图形</a></li>
					</ul>
					<div class="tab-content">
						<div class="chart tab-pane" id="chartPane">
							<div id="manufactureChart" style="width: 100%; height: 500px;"></div>
						</div>
						<div class="chart tab-pane active" id="tbPane">
							<table id="manufactureTb" style="width: 100%;" class="table table-bordered table-hover">
							</table>
						</div>
					</div>
				</div>
			</div>
		</div>
	</ui:define>
	<ui:define name="contentend">
		<script src="/resources/plugins/datatables/jquery.dataTables.js"></script>
		<script src="/resources/plugins/datatables/dataTables.bootstrap.min.js"></script>
		<script src="/resources/js/tables/mytable.js"></script>
		<script src="/resources/js/mymodal.js"></script>
		<script src="/resources/plugins/snapsvg/snap.svg.js"></script>
		<script src="#{request.contextPath}/resources/plugins/echarts/echarts.js"></script>
		<script src="#{request.contextPath}/resources/js/mycharts/categoryBarChart.js"></script>
		<script src='/ui/baseData/protectAccount.js'></script>
		<script>
		$(document).ready(function(){
			$("#tabView").hide(); 
			getStatistics();
			});
		var menushow = false;
		function showSvg(){
			$("#maindiv").empty();
			var svgtxt = $("#form3\\:svgtext").val();
			if(svgtxt &amp;&amp; svgtxt.length > 0){
				if(svgtxt=="1"){
					$("#accountTitle").html("");
					$("#tabView").show();
					$("#svgView").hide();
				}else{
					$("#tabView").hide();
					$("#svgView").show();
					$("#maindiv").append(svgtxt);
					$("svg").attr("id","svgid" );
					var svg = Snap("#svgid");
					svg.drag();
					var svg= $("svg:first");
					if(svg){
						var w = svg.attr("width");
						var h = svg.attr("height");
						svg.removeAttr('viewBox');
						svg.attr("viewBox","0 0 "+w+" "+h);
					}
		 		}
		   }else{
			   	$("#tabView").hide();
				$("#svgView").show();
			    $("#accountTitle").html("");
		   }
			$("#statistics").hide();
		}
		</script>
	</ui:define>
</ui:composition>
